<template>
    <div class="code-form">
        <div class="code-form-item">
            <div class="title">执行事件名称</div>
            <el-input v-model="title" maxlength="20" show-word-limit></el-input>
        </div>
        <div class="code-form-item">
            <div class="title">
                <div>执行代码</div>
                <el-button type="text" @click="openCodeHelp">编码规范及使用帮助</el-button>
            </div>
            <action-codemirror :value.sync="convertCode"></action-codemirror>
        </div>
    </div>
</template>
<script>
import actionCodemirror from '@src/modules/connector/view/setting/components/workflow/components/drawers/actionCodemirror.vue';
import { executeCode } from '@src/modules/connector/util/sampleCode.ts'
import { isNotFunction, isEmpty } from '@src/util/type';

export default {
    name: 'code-drawer',
    provide() {
        return {
            module: this.module,
            flowData: {},
        };
    },
    props: {
        nodeConfig: {
            type: Object,
            default: () => ({}),
        },
        parent: {
            type: Object,
            default: () => ({}),
        },
    },
    computed: {
        parentApp() {
            if (isNotFunction(this.parent?.getParent)) {
                return {}
            }

            return this.parent.getParent().isTrigger
                ? this.parent.getParent().getParent().data
                : this.parent.getParent().data;
        },
        module() {
            return this.parentApp?.bizType?.toLowerCase() || 'api';
        },
    },
    data() {
        return {
            app: this.nodeConfig,
            type: 'inside', // 消息类型 inside：内部，customer：客户
            title: '', // 执行事件名称
            convertCode: executeCode, // 代码
        };
    },
    mounted() {
        const { data } = this.nodeConfig;
        if (!isEmpty(data)) {
            this.title = data.title;
            this.convertCode = data.convertCode || data.code || executeCode;
        }
    },
    methods: {
        getCodeParams() {
            return {
                code: this.convertCode,
                title: this.title,
            }
        },
        // 打开编码规范及使用帮助
        openCodeHelp() {
            window.open('https://doc.shb.ltd/shb_xoqazk/ia4qctp2ly559d1m/gre7yumc5sz4ewod/dklg7gkm64cya8l4/ox8c8k8i3hp1g6do.html');
        },
    },
    components: {
        actionCodemirror,
    },
};
</script>

<style lang="scss" scoped>
.code-form {
    .code-form-item {
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #262626;
            line-height: 32px;
            margin: 8px 0 5px 0;

            .el-button {
                padding: 0;
                font-size: 14px;
            }
        }
    }
}
</style>